<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<% //<%@page import="org.example.ws.FacadeStub.Event"%>

<%@page import="com.foo.servicesCall.EventsStub.Event"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%
Event[] eventarray = null;
eventarray = (Event[])session.getAttribute("EventsArrayData");
%>  
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>SJSU Search Engine</title>
<style type="text/css">    
            .pg-normal {
                color: black;
                font-weight: normal;
                text-decoration: none;    
                cursor: pointer;    
            }
            .pg-selected {
                color: black;
                font-weight: bold;        
                text-decoration: underline;
                cursor: pointer;
            }
</style>
<script type="text/javascript" src="paging.js"></script>
<script type="text/javascript" src="datetimepicker.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
 
</head>
  
  
<body>
  <script type="text/javascript">
	function ChangeDropdowns(value){
	if(value=="allevents"){
		document.getElementById('allevents').style.display='block';
		document.getElementById('eventsbykeyword').style.display='none';
		document.getElementById('eventsbydate').style.display='none';
	}
	else if(value=="eventsbykeyword"){
		document.getElementById('allevents').style.display='none';
		document.getElementById('eventsbykeyword').style.display='block';
		document.getElementById('eventsbydate').style.display='none';
       }
	else if(value=="eventsbydate"){
		document.getElementById('allevents').style.display='none';
		document.getElementById('eventsbykeyword').style.display='none';
		document.getElementById('eventsbydate').style.display='block';
	}
	else
		{
		alert("No Matching found");
		}
		}
	</script>
        <!-- Header Starts here... -->
        <jsp:include page="header.jsp" flush="true" /> 
        <!-- Header ends here... -->
            <!-- Add your content here... --> 
<form method="post" action="EventServlet">
            <div>
            <center>
            <table align ="center">
            <tr>
				<th colspan="2">
				<font size="2" color="red"><sup>*</sup> Required Fields</font></th>
			</tr>
           	<tr>

           	<td colspan="3">
				<% String serverException = (String)request.getAttribute("ServerMessage");
						if(serverException != null){
						%><br> <label style="size: 32; color: red"><%=serverException%></label> <%} %>
			</td></tr>   
               </table>
               <table border="2" align="center">
               <tr>
               <td><h2>Event Search</h2> </td>
               <td>
					<SELECT id="SortBased" name="SortBased" onchange="ChangeDropdowns(this.value);">
						<OPTION value="" selected>- Select -</OPTION>	
						<OPTION value="allevents">Get All Events</OPTION> 
						<OPTION value="eventsbykeyword">Events By Keyword</OPTION>
						<OPTION value="eventsbydate">Events By Date</OPTION> 
					</SELECT>
               </td>
              
               <td>
               <div id="allevents">
               <a name="allevents" style="display: none"></a>
               </div>  
             
               <input id="eventsbykeyword" name="eventsbykeyword" style="display: none" type="text" size="25"  style="background-color:white;" align="middle" />
               
             
			 	<div id="eventsbydate" style="display: none">
			 	<table><tr>
			 	<td>
			 	<p>From Date<font size="4" color="red"><sup>*</sup></font></p>
              	</td>
              	<td>
				<input id="dateText" name="fromDate" type="text" readonly="readonly" size="25" style="background-color:#eeeeee"  align="middle">
						<a href="javascript:NewCal('dateText','MMDDYYYY')">
						<img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>
            	</td>
            	<td>              
	               <p>To Date<font size="4" color="red"><sup>*</sup></font></p>
                </td>
                <td>
				<input id="dateText2" name="toDate" type="text" readonly="readonly" size="25" style="background-color:#eeeeee"  align="middle">
						<a href="javascript:NewCal('dateText2','MMDDYYYY')">
						<img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>
				</td>
				</tr></table>
				</div>

				
			   </td>
               
               <td colspan="3">
	               <p align="right"><input type="submit" name="buttonHit" value="Get Data"/></p>
	               </td>
               </tr>             
               </table>     
            </center>                    
            </div> 
              <div>

             	
            <%
            if(eventarray != null)
            { 
            	if(eventarray.length >0)
             	{
             %>
             	<table border="2"  id="results" align="center" width = 90%>
             	<tr>
					<th align="center" style="color:red" bordercolor="red">Event Title</th>
					<th align="center" style="color:red" bordercolor="red">Event Link</th>
					<th align="center" style="color:red" bordercolor="red">Description</th>
				</tr>

				
				<%
					for(int i=0;i<eventarray.length;i++)
					{
				%>
					<tr>
					<td bordercolor="black">
					 	<label id ="title" style="size: 25;"><%=eventarray[i].getEvent_title() %></label> 
					</td>
					<td bordercolor="black">
					 	<label id ="link" style="size: 25;"><a href="<%=eventarray[i].getEvent_link() %>"><%=eventarray[i].getEvent_link() %></a></label> 
					</td>
					<td bordercolor="black">
					 	<label id ="description" style="size: 25;"><%=eventarray[i].getEvent_description() %></label> 
					</td>
					</tr>					
	            <%
					}
				%>
				</table>
					<div id="pageNavPosition" align="center"></div>
					
					 <script type="text/javascript"><!--
        				var pager = new Pager('results', 2); 
        				pager.init(); 
        				pager.showPageNav('pager', 'pageNavPosition'); 
        				pager.showPage(1);
    				//--></script>
				<%
				}
				else
				{%>
				<label>No Records Found</label>

				<%
				} 
             	}
             	%>
             </div>
         </form>
   
  
    </body>
</html>